<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Spheres &amp; Fog</title>
    <meta name="description" content="Spheres &amp; Fog - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene background="color: #AAB" fog="type: linear; color: #AAB; far: 30; near: 0">
      <a-assets>
        <img id="highlight1" src="../../assets/img/radial-highlight.png">
        <img id="shadow3" src="../../assets/img/radial-shadow-3.png">
      </a-assets>

      <a-entity position="0 0 -10">
        <!-- Ground Highlight -->
        <a-image position="0 -.2 5" src="#highlight1" rotation="-90 0 0"
                 scale="30 30 30"></a-image>

        <!-- Orange -->
        <a-entity position="0 0 -5">
          <a-sphere position="0 4.2 0" radius="4.2" color="#F16745"
                    roughness="0.8" width-segments="52" height-segments="52"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="3 3 3"></a-image>
        </a-entity>

        <!-- Green -->
        <a-entity position="-3 0 0">
          <a-sphere position="0 1.75 0" radius="1.75" color="#7BC8A4"
                    roughness="0.2"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="1.75 1.75 1.75"></a-image>
        </a-entity>

        <!-- Blue -->
        <a-entity position="1 0 0">
          <a-sphere position="0 1 0" radius="1" color="#4CC3D9" metalness="0.1"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="1 1 1"></a-image>
        </a-entity>

        <!-- Yellow -->
        <a-entity position="3 0 1">
          <a-sphere position="0 0.5 0" radius="0.5" color="#FFC65D"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="0.5 0.5 0.5"></a-image>
        </a-entity>

        <!-- Purple -->
        <a-entity position="20 0 -2">
          <a-sphere position="0 10 0" radius="10" color="#93648D"
                    segments-width="52" segments-height="52"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="9 9 9"></a-image>
        </a-entity>

        <!-- Yellow -->
        <a-entity position="-24 0 -34">
          <a-sphere position="0 18 0" radius="18" color="#FFC65D"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="8 8 8"></a-image>
        </a-entity>

        <!-- Green -->
        <a-entity position="25 0 20">
          <a-sphere position="0 12 0" radius="12" color="#7BC8A4"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="8 8 8"></a-image>
        </a-entity>

        <!-- White -->
        <a-entity position="-15 0 5">
          <a-sphere position="0 3 0" radius="3" color="#ECECEC"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="3 3 3"></a-image>
        </a-entity>

        <!-- Orange -->
        <a-entity position="-6 0 6">
          <a-sphere position="0 1 0" radius="1" color="#F16745" roughness="0.8"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="1 1 1"></a-image>
        </a-entity>

        <!-- Yellow -->
        <a-entity position="-20 0 30">
          <a-sphere position="0 30 0" radius="30" color="#FFC65D" roughness="0.6"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="15 15 15"></a-image>
        </a-entity>

        <!-- Blue -->
        <a-entity position="-1 0 14">
          <a-sphere position="0 2 0" radius="2" color="#4CC3D9"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
        </a-entity>

        <!-- Orange -->
        <a-entity position="10 0 15">
          <a-sphere position="0 4 0" radius="4" color="#F16745" roughness="1"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
        </a-entity>

        <!-- Blue -->
        <a-entity position="6 0 4">
          <a-sphere position="0 1.5 0" radius="1.5" color="#4CC3D9" metalness="0.1"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="1.5 1.5 1.5"></a-image>
        </a-entity>

        <!-- Yellow -->
        <a-entity position="5 0 14">
          <a-sphere position="0 .6 0" radius=".6" color="#FFC65D"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="0.6 0.6 0.6"></a-image>
        </a-entity>

        <!-- Purple -->
        <a-entity position="5 0 25">
          <a-sphere position="0 2 0" radius="2" color="#93648D"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
        </a-entity>

        <!-- White -->
        <a-entity position="2 0 15">
          <a-sphere position="0 0.2 0" radius="0.2" color="#ECECEC"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="0.2 0.2 0.2"
                   opacity="0.5"></a-image>
        </a-entity>

        <!-- Purple -->
        <a-entity position="4 0 10">
          <a-sphere position="0 0.15 0" radius="0.15" color="#93648D"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="0.25 0.25 0.25"
                   opacity="0.6"></a-image>
        </a-entity>

        <!-- Blue -->
        <a-entity position="4 0 11">
          <a-sphere position="0 0.1 0" radius="0.1" color="#4CC3D9"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="0.15 0.15 0.15"
                   opacity="0.6"></a-image>
        </a-entity>

        <!-- Green -->
        <a-entity position="5 0 11">
          <a-sphere position="0 0.3 0" radius="0.3" color="#7BC8A4"></a-sphere>
          <a-image src="#shadow3" rotation="-90 0 0" scale="0.25 0.25 0.25"
                   opacity="0.6"></a-image>
        </a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
